<template>
  <base-view class="custom" :model="queryParams" @submit="search">
    <template v-slot:params>
      <a-col :span="8">
        <a-form-model-item label="商户手机号">
          <a-input v-model="queryParams.contactPhone" placeholder="请输入商户手机号" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="商户联系人">
          <a-input v-model="queryParams.contactName" placeholder="请输入商户联系人" />
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="地区代码－省" >
          <a-select @change="handleChange('province')" v-model="queryParams.province" default-value="Option1" @click.native="getProvince()">
            <a-select-option value="">
              -请选择省-
            </a-select-option>
            <a-select-option v-for="item in provinceList" :key="item" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="地区代码－市" >
          <a-select @change="handleChange('city')" v-model="queryParams.city" default-value="Option1" @click.native="getCity()" >
            <a-select-option value="">
              -请选择市-
            </a-select-option>
            <a-select-option v-for="item in cityList" :key="item" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="地区代码－区" >
          <a-select v-model="queryParams.area" default-value="Option1" @click.native="getArea()">
            <a-select-option value="">
              -请选择区-
            </a-select-option>
            <a-select-option v-for="item in areaList" :key="item" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="8">
        <a-form-model-item label="处理状态">
          <a-select v-model="queryParams.applyStatus">
              <a-select-option value="">-请选择处理状态-</a-select-option>
              <a-select-option value="00">已申请</a-select-option>
              <a-select-option value="10">已受理</a-select-option>
              <a-select-option value="20">已入驻</a-select-option>
              <a-select-option value="30">入驻失败</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-col>
      <a-col :span="24">
      <a-form-model-item class="search">
        <a-button type="primary" html-type="submit">搜索</a-button>
        <a-button style="margin-left: 8px" html-type="reset" @click="reset">重置</a-button>
      </a-form-model-item>
      </a-col>
    </template>
    <!-- 表格区域 -->
    <div class="section">
      <a-table
        ref="TableInfo"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="pagination"
        :loading="loading"
        :rowKey="
          (record, index) => {
            return index;
          }
        "
        @change="pageChange"
        @showSizeChange="pageChange"
        :scroll="{ x: 1200 }"
      >
        <template slot="operation" slot-scope="text, record">
          <a @click="openModal(record)">派单</a>
        </template>
      </a-table>
    </div>
    <a-modal
      v-model="modalVisible"
      title="派单"
      width="1050px"
      @ok="submit()"
      :maskClosable="false"
    >
      <mchnt-apply-operation ref="modalForm"></mchnt-apply-operation>
    </a-modal>
  </base-view>
</template>

<script>
import RangeDate from "../../../../components/datetime/RangeDate";
import MchntApplyOperation from "./MchntApplyOperation";
export default {
  name: "MchntApply",
  components: {MchntApplyOperation,RangeDate },
  data() {
    return {
      modalVisible: false,
      queryParams: {
        instId:"",
        contactPhone:"",
        contactName:"",
        province:"",
        city:"",
        area:"",
        applyStatus:"",
      },
      dataSource: [],
      provinceList: [],
      cityList: [],
      areaList: [],
      loading: false,
      pagination: {
        pageNum:1,
        pageSize:10,
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`,
      },
      columns: [
        {
          title: "商户地区",// 拼接areaName
          dataIndex: "areaName",
          width: 120,
        },
        {
          title: "详细经营地址",
          dataIndex: "address",
          width: 120,
        },
        {
          title: "商户联系人",
          dataIndex: "contactName",
          width: 120,
        },
        {
          title: "商户手机号",
          dataIndex: "contactPhone",
          width: 120,
        },
        {
          title: '商户联系地址',
          width: 120,
          customRender: (text, row, index) => {
            return row.address;
          }
        },
        {
          title: "拓展机构",
          dataIndex: "remark3",
          width: 120,
        },
        {
          title: "拓展经理姓名",
          dataIndex: "managerName",
          width: 120,
        },
        {
          title: "拓展经理手机号",
          dataIndex: "managerPhone",
          width: 120,
        },

        {
          title: "处理状态",
          dataIndex: "applyStatus",
          width: 80,
          customRender: (text, row, index) => {
            switch (text) {
              case "00":
                return "已申请";
              case "10":
                return "已受理";
              case "20":
                return "已入驻";
              case "30":
                return "入驻失败";
            }
          },
        },
        {
          title: "申请日期",
          dataIndex: "applyTime",
          width: 120,
        },
        {
          title: "法人行",
          dataIndex: "instName",
          width: 120,
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          scopedSlots: {customRender: "operation"},
          width: 100
        },
      ]
    };
  },
  mounted() {
    // this.search();
  },
  methods: {
    handleChange(param) {
      if(param === 'province'){
        this.queryParams.city = '';
        this.queryParams.area = '';
      }
      if(param === 'city'){
        this.queryParams.area = '';
      }
    },
    warning(message) {
      const h = this.$createElement;
      this.$warning({
        title: '提示',
        content: h('div', {}, [
          h('p', message),
        ]),
        onOk() {},
      });
    },

    async reset(){
      this.queryParams = {instId:this.queryParams.instId}
      this.pagination.pageNum = this.pagination.defaultCurrent;
      this.pagination.pageSize = this.pagination.defaultPageSize;
      await this.search();
    },
    async submit() {
      const res = await this.$refs.modalForm.submit();
      if (res) {
        this.modalVisible = false;
        this.pagination.pageNum = this.pagination.defaultCurrent;
        this.pagination.pageSize = this.pagination.defaultPageSize;
        await this.search();
      }
    },
    async search(e) {
      e && e.preventDefault && e.preventDefault();
      if(this.queryParams.instId==''){
          this.warning("请先选择法人行");
          return ;
      }
      try {
        const res = await this.$get("/admin/merParam/mchntApplyInfo/list", {
          instId: this.queryParams.instId,
          contactPhone:this.queryParams.contactPhone,
          contactName:this.queryParams.contactName,
          province:this.queryParams.province,
          city:this.queryParams.city,
          area:this.queryParams.area,
          applyStatus:this.queryParams.applyStatus,
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
        });
        this.dataSource = res.data.rows;
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        console.error(e);
      }
    },
    async getProvince() {
      try {
        const res = await this.$get("/admin/merParam/regionInfo/select2", {
          l:"01"
        });
        if (res.status === 200) {
          this.provinceList = res.data;
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getCity() {
      try {
        if(typeof this.queryParams.province === 'undefined' || this.queryParams.province === ''){
          this.warning("请先选择省");
          return ;
        }
        const res = await this.$get("/admin/merParam/regionInfo/select2", {
          p:this.queryParams.province,
          l:"02"
        });
        if (res.status === 200) {
          this.cityList = res.data;
        }
      } catch (e) {
        console.error(e);
      }
    },
    async getArea() {
      try {
        if(typeof this.queryParams.city === 'undefined' || this.queryParams.city === ''){
          this.warning("请先选择市");
          return ;
        }
        const res = await this.$get("/admin/merParam/regionInfo/select2", {
          p:this.queryParams.city,
          l:"03"
        });
        if (res.status === 200) {
          this.areaList = res.data;
        }
      } catch (e) {
        console.error(e);
      }
    },
    openModal(beanInfo) {
      this.modalVisible = true;
      this.$nextTick(() => {
        this.$refs.modalForm.setBeanInfo(beanInfo,this.queryParams.instId);
      });
    },
    pageChange(e) {
      this.pagination.pageNum = e.current;
      this.pagination.pageSize = e.pageSize;
      this.search();
    },
  },
};
</script>
<style lang="less" scoped>
@import "../../../../../static/less/Common";
</style>
